import React from 'react';
import { Result, WhiteSpace, WingBlank, List, Button, Modal } from 'antd-mobile';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import browserCookies from 'browser-cookies';
import { logout } from '../../redux/user.redux.js';
import { clearmsg } from '../../redux/chat.redux.js';
import AuthRoute from '../authRoute/AuthRoute'

@connect(
state => state.user,
{ logout,clearmsg }
)
class User extends React.Component{
	
	handleLogout(){
		Modal.alert('注销','确认退出登录',[
			{text:'取消',onPress:null},
			{text:'确定',onPress:()=>{
				browserCookies.erase('userid');
				this.props.logout();
				this.props.clearmsg();
			}},
		]);
	}
	
	render(){
		const Item = List.Item;
		const Brief = Item.Brief;
		return  this.props.user ? (
			<div>
				<Result
					img={<img src={require(`../img/${this.props.avatar}.jpg`)} alt="avatar" width='100%' />}
					title={this.props.user}
					message={this.props.company ? <div>{this.props.company}</div> : null}
				/>
				<WhiteSpace />
				<List renderHeader={() => (this.props.company ? '招聘职位' : '个人简介')}>
					<Item multipleLine>
						{this.props.title}
						{this.props.desc.split('\n').map(d => (<Brief key={d}>{d}</Brief>))}
						{this.props.money ? <Brief>薪资：{this.props.money }</Brief> : null}
					</Item>
				</List>
				<WhiteSpace />
				<WingBlank>
					<Button type="warning" onClick={this.handleLogout.bind(this)}>退出登录</Button>
				</WingBlank>
			</div>
		) : (<div>{this.props.redirectTo ? <Redirect to={this.props.redirectTo} /> : <AuthRoute></AuthRoute>}</div>)
	}
}

export default User